<style lang="less">
.my-lesson-item {
  .img {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .lesson-props {
    padding-left: 10px;
    .title {
      font-size: 16px;
      font-weight: bold;
      padding: 3px;
    }

    .chapter {
      font-size: 12px;
      padding: 3px;
    }

    .progress {
      font-size: 12px;
      color: red;
      padding: 3px;
    }

    .btns {
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>

<template>
  <nut-row class="my-lesson-item">
    <nut-col :span="12" class="img">
      <nut-image :src="cfg.imageUrl(props.data.thumb)" fit="cover" />
    </nut-col>
    <nut-col :span="12">
      <div class="lesson-props">
        <div class="title">{{ props.data.title }}</div>
        <div class="chapter">{{ props.data.chapterTitle }}</div>
        <div class="progress">当前进度: {{ props.data.progress }}%</div>
        <div class="btns">
          <nut-button
            type="primary"
            plain
            size="small"
            @click="handleStudy(props.data.id, props.data.chapterId)"
            >继续学习</nut-button
          >
        </div>
      </div>
    </nut-col>
  </nut-row>
  <nut-divider />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { MyLessonListItem } from '@/config/types'
import cfg from '@/config/config'

interface Props {
  data: MyLessonListItem
}

const props = defineProps<Props>()
const router = useRouter()
const handleStudy = (id: number, chapterId: number) => {
  router.push({ name: 'my_lesson_detail', params: { id }, query: { chapterId } })
}
</script>
